<template>
	<view style="background-color: #fff;">
		<!-- 头部导航 -->
		<uni-nav-bar left-icon="left"    :statusBar="true" titleSize="30px" leftText="返回"  right-text="修改" @clickRight="editFn"   title="调拨详情"  @clickLeft="back"   :fixed="true" backgroundColor="#3286ed" color="#fff"/>
			
		<u--form class="form" labelPosition="left" labelWidth="100px" :model="form" ref="form">
			<u-form-item  label="库存调拨单号" prop="serialNum" borderBottom ref="item1"  >
				<u--input   v-model="form.serialNum" border="none" placeholder="库存调拨单号"></u--input>
			</u-form-item>
			<u-form-item @click="arrivalDateShow=true" label="调拨日期" prop="repTransferDate" borderBottom ref="item1"  >
				<u--input    v-model="form.repTransferDate" border="none" placeholder="调拨日期"></u--input>
			</u-form-item>
			
			
			<u-form-item  label="负责人" prop="responsibleName" borderBottom ref="item1"  >
				<u--input  v-model="form.responsibleName" border="none" placeholder="负责人"></u--input>
			</u-form-item>
			<u-form-item   label="调出仓库" prop="outRepertory" borderBottom ref="item1"  >
				<u--input   v-model="form.outRepertory" border="none" placeholder="调出仓库"></u--input>
			</u-form-item>
			<u-form-item   label="调出仓库负责人" prop="outRepertoryName" borderBottom ref="item1"  >
				<u--input   v-model="form.outRepertoryName" border="none" placeholder="调出仓库负责人"></u--input>
			</u-form-item>
			
			<u-form-item   label="调入仓库" prop="inRepertory" borderBottom ref="item1"  >
				<u--input   v-model="form.inRepertory" border="none" placeholder="调入仓库"></u--input>
			</u-form-item>
			<u-form-item  label="调入仓库负责人" prop="inRepertoryName" borderBottom ref="item1"  >
				<u--input   v-model="form.inRepertoryName" border="none" placeholder="调入仓库负责人"></u--input>
			</u-form-item>
			<u-form-item  label="调拨产品" prop="syTransferProductTList" borderBottom ref="item1"  >
				 
			</u-form-item>
			 <view  style="padding-right: 5xp;margin-bottom: 5px;">
			 	<uni-table border stripe emptyText="暂无更多数据" >
			 		<!-- 表头行 -->
			 		<uni-tr>
			 			<uni-th align="center" width="70px">产品名称</uni-th>
			 			<uni-th align="center" width="60px">型号</uni-th>
			 			<uni-th align="center" width="50px">数量</uni-th>
			 			 <uni-th align="center" width="50px">仓库</uni-th>
			 		</uni-tr>
			 		<!-- 表格数据行 -->
			 		<uni-tr v-for="(item,index) in form.syTransferProductTList" :key="index">
			 			<uni-td align="center">{{item.productName}}</uni-td>
			 			<uni-td align="center">{{item.model}}</uni-td>
			 			<uni-td align="center">
			 				<template slot-scope="scope">
			 					<input @blur="isquantity(item,index)"  v-model="item.quantity" type="text"/>
			 				</template>
			 			</uni-td>
					<uni-td align="center">{{item.warehouseName}}</uni-td>
			 			 
			 		</uni-tr>
			 	</uni-table>
			 </view>
			 <u-form-item    label="运输方式" prop="logisticsTypeName" borderBottom ref="item1">
			     <u--input :readonly="true" v-model="form.logisticsType" border="none" placeholder="运输方式">
			     </u--input>
			     <u-icon slot="right" name="arrow-right"></u-icon>
			 </u-form-item>
			</u--form>
		<!-- 扫码出库-->
			<u-cell>
			    <template #title>
			        <view class="u-cell-text" style="color: #ccc;">扫码出/入库</view>
					
			    </template>
				<template #value>
					<uni-icons type="scan" @click="codeBtn" size="26"></uni-icons>
				</template>
				</u-cell>
				<u-cell>
					<template #title>
						<u--input customStyle="height:30px" placeholder="请输入机器序列号"  v-model="machineFromData.machineSerialNumber"></u--input>
					</template>
				</u-cell>
				<view>
					<u-cell >
						<template #title>
							<u-button text="序列号确认" @click="tranferachineFn"></u-button>
						</template>
					</u-cell>
				</view>
			<view style="border-bottom:1px solid #ccc ;margin: 5px;">
				  <u-tabs @click="clickFn" :list="list":activeStyle="{ color: '#fd9540',  transform: 'scale(1.05)'}"></u-tabs>
			</view>	
			<view v-if="Index==0" class="">
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" >序号</uni-th>
						<uni-th align="center" >产品名称</uni-th>
						<uni-th align="center" >型号</uni-th>
						<uni-th align="center">机器序列号</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in tranferOutList" :key="index">
						<uni-td align="center">{{index}}</uni-td>
						<uni-td align="center">{{item.productName}}</uni-td>
						<uni-td align="center">{{item.model}}</uni-td>
						<uni-td align="center">{{item.machineSerialNumber}}</uni-td>
					</uni-tr>
					
				</uni-table>
			</view>
			<view  v-if="Index==1" class="">
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" >产品名称</uni-th>
						<uni-th align="center" >型号</uni-th>
						<uni-th align="center">机器序列号</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in tranferInList" :key="index">
						<uni-td align="center">{{item.productName}}</uni-td>
						<uni-td align="center">{{item.model}}</uni-td>
						<uni-td align="center">{{item.machineSerialNumber}}</uni-td>
					</uni-tr>
					
				</uni-table>
			</view>
			<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {getTransfer} from '@/api/tranfer.js'
	import {getDicts} from '@/api/dictionary/index.js'
	import {tranferMachine,getTranferMachineList} from "@/api/tranfermachine.js"
	import {machineList} from '@/api/machine/machine.js'
	export default {
		data() {
			return {
				form:{},
				logisticsTypeOptionsDou:[],
				logisticsTypeOptions:[],
				machineFromData:{  machineSerialNumber:"",machineNo:""},//扫码时间机器
				tranferOutList:[],
				tranferInList:[],
				list:[
					{
					name: '调出产品',
					},
					{
					name: '调入产品',
					},
				],
				Index:0.,
				ids:{id:''}
			};
		},
		created() {
			
		},
		onLoad(e) {
			this.ids.id=e.id
			this.getShippingTypeOptions()
			this.initData(e)
			this.getMachine(e)
		},
		methods:{
			
			async initData(e){
				let res=await getTransfer(e.id)
				this.form=res.data
				this.form.logisticsType = this.getDictValue(this.logisticsTypeOptionsDou, this
				    .form.logisticsType)
				console.log(this.form.logisticsType);
			},
			editFn(){
				uni.navigateTo({
					url:"/pages/transfer/edittranfe/edittranfe?id="+this.form.id
				})
			},
			// 扫码出入库
			codeBtn(){
				var that =this
				uni.scanCode({
					scanType: ['qrCode'],
					success: function (res) {
						console.log(res);
						console.log(res.result);
						
						that.machineFromData.machineNo=res.result
						 that.tranferachine()
						
					}
				})
			},
			// 手动
			async tranferachineFn(){
				let res= await machineList({machineSerialNumber:this.machineFromData.machineSerialNumber})
				this.machineFromData.machineNo=res.rows[0].machineNo
				this.tranferachine()
			},
			//调拨机器
			async tranferachine(){
			     await tranferMachine({transferId:this.form.id,transferNo:this.form.serialNum,machineNo:this.machineFromData.machineNo})
				 	 var that=this
					 this.$refs.uToast.show({
						 type:'success',
						 message:"操作成功",
						 complete(){
							  
							that.getMachine(that.ids)
						 }
					 })
			
			
			},
			clickFn(val){
				this.Index=val.index
				// this.getMachine()
			},
			async getMachine(e){
				let res=await getTranferMachineList({transferId:e.id})
				this.tranferInList=[],
				this.tranferOutList=[]
				res.rows.forEach(item=>{
					if(item.transferProperty=="1"){
						this.tranferOutList.push(item)
						console.log(this.tranferOutList);
					}else if(item.transferProperty=="2"){
						this.tranferInList.push(item)
						console.log(this.tranferInList);
					}
				})
			},
			back(){
				uni.navigateBack({delta:1})
			},
			getDictValue(arr, item) {
			    for (var i = 0; i < arr.length; i++) {
			        if (item == arr[i].dictValue) {
			            return arr[i].dictLabel
			        }
			    }
			},
			// 获取运输方式
			getShippingTypeOptions() {
			    getDicts('biz_shipping_type').then(response => {
			        this.logisticsTypeOptionsDou = response.data
			        this.logisticsTypeOptions.push(response.data)
			        
			    })
			},
		}
	}
</script>

<style lang="scss">
.form{
	background-color: #fff;
	padding-left: 10px;
}
</style>
